﻿/**
 * HopeCMS 后台css文件
 * 
 * css 目录索引：
 *
 * 　  1. layout (整体布局)
 *     2. header (头部)
 *     3. main   (主体)
 *     4. footer (脚部)
 *     5. public (公共样式)
 *	   6. metro block (metro风格磁块)
 *	   7. menu   (菜单)
 *	   8. nav (导航)
 * 
 * @author x.mo root@imoi.cn
 * powered by imoi.cn 
 */

/**
 *******************************
 * 1. layout
 *
 * start
 *******************************
 */
html, body {height:100%; overflow:hidden;}


html, body, h1, h2, h3, ul, li {margin: 0; padding: 0; font-family: '微软雅黑';}

ul li{list-style: none; vertical-align: bottom;}

body {background: #efefef; font-size: 14px;}

a{text-decoration: none;}

img{border: 0;}

/**
 *******************************
 * 2. header
 *
 * start
 *******************************
 */

#loading {
	position: absolute; background: url(../images/flyingdots.gif) center no-repeat;
	height: 4px; width: 100%; z-index: 5; top: 0;
}

#header {
		width: 100%; height: 50px; position: fixed; top: 0; z-index:2; background: #0e70ad; color: #fff; overflow: none;
		_position: absolute; _top: expression_r(documentElement.scrollTop + "px"); width: 100%; z-index: 2;
	}
	#header .link{color:#fff; line-height: 43px; padding: 3px 10px; font-size: 16px; float:left; margin-left: 3px}
	#header #logo {margin-left: 15px; padding: 3px 8px}
	#header #top_line {border-left: 1px solid #fff; height: 25px; margin: 13px 10px 0 14px;}
	#header #start {font-size: 16px; color: #fff; padding: 0 10px 0 10px; line-height: 50px;}
	#header #start_logo {
		background: url(../images/controls.png) center -107px ; 
		width: 11px; height: 13px; margin:21px 0 0 4px; 
	}
	#header #site {position: relative; min-width: 85px; height: 44px; padding: 3px 0; margin-right: 5px; color: #fff; line-height: 44px; text-indent: 8px; }
	#header #site #site_ico {
		width:22px; height:20px; margin: 12px 8px 0 5px;
		background: url(../images/user_setting.png) center -40px; 
	}
	#header #userinfo {position: relative; min-width: 85px; height: 44px; padding: 3px 0; margin-right: 5px; color: #fff; line-height: 44px; text-indent: 8px; }
	#header #userinfo #userinfo_ico {
		width:22px; height:20px; margin: 10px 8px 0 5px;
		background: url(../images/user_setting.png) center 0 no-repeat; 
	}
	#header #setting {cursor: pointer; position: relative; min-width: 85px; height: 44px; padding: 3px 0; margin-right: 20px; color: #fff; line-height: 44px; text-indent: 8px; }
	#header #setting #setting_ico{
		width:22px; height:20px; margin: 12px 8px 0 5px;
		background: url(../images/user_setting.png) center -20px no-repeat; 
	}
	#userinfo, #site {cursor: pointer;}
#header-margin {height: 50px;}

/**
 *******************************
 * 3. main
 *
 * start
 *******************************
 */
#main {min-height: 567px; overflow-x: hidden; overflow-y: auto; width:100%;}

#main #prev_button{
	width: 48px; height: 48px; margin-top: 20px;
}

#main #prev_button {
	background: url(../images/page_button.png) -48px 0px;
}

#main #prev_button:hover {
	background: url(../images/page_button.png) -48px -48px;
}

#main #prev_button:active {
	background: url(../images/page_button.png) -48px -96px;
}

#main #manage_home {
	background: #fff; width: 290px; margin-left: 25px; line-height: 25px;
	position: absolute; right: 10px; top: -15px; height: 512px; color: #555;
	border: 1px solid #ccc; border-top: 0; padding: 5px;
}

#manage_home .home-list-info {margin: 0; font-size: 12px;}

#manage_home .home-list-info .ct{float: left; width: 95px; text-align: right;}

#manage_home .home-list-info .ct_val{float: left; margin-left: 10px; width: 180px;}

#login_info {
	font-size: 12px; height:25px; line-height: 25px; text-indent: 5px; width: 660px;
	margin-top: 15px;
}

/**
 *******************************
 * 4. footer
 *
 * start
 *******************************
 */
#footer{
	text-align: center; font-size: 12px; color: #333; width: 990px; margin: 0 auto;
	line-height: 35px; background: #efefef; left: 0; padding-right: 10px; text-indent: 30px
}

#footer a {color: #555;}
#footer a:hover {color: #999;}

/**
 *******************************
 * 5. public
 *
 * start
 *******************************
 */
.clear {clear: both;}

.hand{cursor: pointer;}

.real {width: 1000px; margin: 0 auto;}

.float-left {float: left;}

.float-right {float: right;}

.label-hover:hover {background: #095D91;}

.label-activ:active {background: #0E7CC0;}

.width-440 {width: 440px;}

.width-360 {width: 360px;}

.width-180 {width: 180px;}

.col-red {color: red;}
.col-green {color: green;}
.col-blue {color: blue;}
.col-000 {color: #000;}

.long_radio_height{height: 33px; line-height: 33px;}

.metro-block {
	color: #fff; border: 3px solid #efefef; margin: 2px; 
	float: left; position: relative; overflow: hidden;
}

.metro-img {margin: 14px 0 0 10px;}

.metro-list {margin: 10px 0 0 25px; line-height: 27px;}

.metro-block a {color: #eee;}

.metro-block a:hover {color: #fff;}

.metro-block a:active {color: #efefef;}

.metro-block:hover {border: 3px solid #555; }

.metro_title {text-indent: 24px; font-size: 18px; line-height: 45px;}

.margin-top-10 {margin-top: 10px;}

.margin-top-20 {margin-top: 20px;}

.margin-left-40 {margin-left: 50px;}

.metro_caption {font-size: 16px; margin: 40px 0 0 10px;}

.notice-layout {
	position: absolute; z-index: 9; background: #000; height: 25px; line-height: 25px; cursor: pointer;
	filter: alpha(opacity=30); -moz-opacity:0.3; opacity: 0.3; bottom: -25px; width: 100%; 
}

.notice-text {
	position: absolute; z-index: 10; bottom: -25px; height: 25px; line-height: 25px;
	color: #efefef; text-indent: 8px; cursor: pointer;
}

/* 紫色 */
.bg-purple{background: #59008c;}

/* 暗天蓝 */
.bg-drak-skyblue{background: #0072bc;}

/* 橘黄 */
.bg-orange{background: #cd4900;}

/* 红 */
.bg-red{background: #bc1c48;}

/* 绿 */
.bg-green{background: #008641;}

/* 黑 */
.bg-black{background: #333;}

.title {line-height: 35px; font-size: 16px; text-indent: 8px; border-bottom: 1px solid #ccc; margin-top: 5px; color: #333;}

.dp_menu {
	position: absolute; top: 50px; display: none; width: 98%; 
	background: #fff; border: 1px solid #ccc; border-top: 0;
}

.dp_menu a{color: #555; display: block;}

.dp_menu a:hover{color: #fff;}

.dp_menu li {height: 25px; line-height: 25px; margin: 5px 0;}

.dp_menu li:hover{background: #555;}

.dp_menu li:active{background: #000;}

.content-title { 
	margin: 7px 0 0 8px; text-indent: 14px; font-size: 14px; color: #333;
	height: 35px; line-height: 35px; background: #f8f8f8; width:98.5%;}

.table-input {margin: 15px 0 0 10px; width: 99%;}

.table-input td{height: 50px; font-size: 12px; border-bottom: 1px solid #eee;}

.table-input tr:hover{background: #f8f8f8}

.table-input .td-title{
	text-align: left; width: 200px; color: #444;text-indent: 14px
}

.table-input .td-ct{
	height: 35px;
	font-weight: bold;
}

.table-input .td-value{
	width: 330px;
}

.table-input .td-mark{
	text-align: left; color: #777; font-style: italic; 
}


.tab-title ul{float: left; height :35px; border-bottom: 1px solid #cecece; width: 99%; margin: 10px 0 0 10px;}

.tab-title li{
	float: left; padding: 0 15px; border:1px solid #fff; height: 34px; color: #555;
	line-height: 34px; border-bottom:0; margin-right: 5px; cursor: pointer;
}

.tab-title .li:hover{border: 1px solid #eee; border-bottom:0; color: #777;}

.tab-title .li:active{color: #555;}

.tab-title .active{border:1px solid #cecece; border-bottom:1px solid #fff; color: #000; height: 34px; position: relative;}
.tab-title .active:hover{border:1px solid #cecece; border-bottom:1px solid #fff; color: #000; height: 34px; position: relative;}
.tab-title .active:active{border:1px solid #cecece; border-bottom:1px solid #fff; color: #000; height: 34px; position: relative;}

/**
 *******************************
 * 6. metro block
 *
 * start
 *******************************
 */
 .tiny-square {
 	width : 100px;
 	height: 100px;
 	text-align: center;
 }
.tiny-square img {margin-top: 15px;}

 .in-square {
 	width : 150px;
 	height: 100px;
 }

 .middle-square {
 	width : 180px;
 	height: 100px;
 }

 .big-square {
 	width : 210px;
 	height: 100px;
 }

 .long-square {
 	width : 360px;
 	height: 100px;
 }

 .in-rectangle {
 	width : 210px;
 	height: 210px;
 }

 .tiny-rectangle {
 	width : 180px;
 	height: 210px;
 }

 /**
 *******************************
 * 7. menu
 *
 * start
 *******************************
 */
#menu {
	border-right: 1px solid #bbb; width: 201px; position: absolute;
	top: 50px; height: 100%; background: #f8f8f8;
}

#menu .menu_title {
	line-height: 40px; height: 40px; text-indent: 24px; color: #555;
	background: #dfdfdf; border-bottom: 1px solid #bbb;
}

#menu ul{margin-top:5px;}
#menu li{
	font-size: 12px; line-height: 25px; height:25px; text-indent: 36px; cursor: pointer;
	border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; margin-top:3px;
}
#menu li:hover{background: #efefef;}
#menu li:active{color:#555;}
#menu .link{background: #fff; border-top:1px solid #bbb; 
	position: relative; width: 202px; border-bottom:1px solid #bbb; 
}

#menu .link:hover{background: #efefef; width: 201px; border-right:1px solid #bbb; }

#nav {
	border-bottom: 1px solid #bbb; height: 40px; padding-left: 212px; line-height: 40px;
}

#nav a{
	float:left; padding: 0 10px; margin-left: 3px; cursor: pointer;
	border-left: 1px solid #efefef;border-right: 1px solid #efefef;
}
#nav a:hover{background: #ddd; border-left:1px solid #bbb; border-right:1px solid #bbb;}
#nav a:active{background: #ccc; border-left:1px solid #bbb; border-right:1px solid #bbb;}
#nav .link{background: #f8f8f8; border-left:1px solid #bbb; border-right:1px solid #bbb;}

#main_content {
	left: 202px; position: absolute; background: #fff; overflow-y: auto; overflow-x: hidden;
}